<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Searchlist</title>

    <script src="../../src/meteora.js" type="text/javascript"></script>

    <link type="text/css" rel="stylesheet" href="../css/test.css" />

    <style type="text/css">
      #left {
        display: block;
        width: 40%;
        float: left;
      }
      #right {
        display: block;
        width: 40%;
        float: right;
      }
      .m-searchlist ul {
        height: 150px;
      }
    </style>

  </head>
  <body>

    <h1>Meteora.Searchlist</h1>

    <div class="instructions">
      Search for your country name. Modify the form and see the results being updated
      everythime you change something, click on the results to execute a callback.
    </div>

    <div style="overflow: auto">
      <div id="left">
        <form id="test_form" method="post" action="../server-side/search.php">
          <h4>Search for world countries</h4>
          <label>
            Country name:<br />
            <input type="text" name="q" value="a" />
          </label>
          <label>
            Display:<br />
            <select name="display">
              <option value="1" selected="selected">name</option>
              <option value="2">code</option>
              <option value="3">name and code</option>
            </select>
          </label>
          <label>
            <input type="checkbox" name="case_matters" value="1" /> Case sensitive.
          </label>
          <fieldset>
            <legend>Order</legend>
            <label>
              <input type="radio" name="order" value="asc" /> ascendent
            </label>
            <label>
              <input type="radio" name="order" value="desc" /> descendent
            </label>
          </fieldset>
        </form>
      </div>
      <div id="right">
        <h4>Search results</h4>
        <div id="search_results"></div>
      </div>
    </div>

    
    <script type="text/javascript">

      // Enabling Meteora's debug
      Meteora.showDebug(true, true);

      // Loading Searchlist Control
      Meteora.uses('searchlist');
      
      // Adding startup functions
      Meteora.onStart(
        function() {
          new Searchlist(
            // Search form id
            'test_form',
            {
              // The event to perform when the user clicks in the element
              'onClick': function(data) {
                log('data.index = '+data.index+', data.content = '+data.content+'');
              },
              'attachTo': 'search_results'
            }
          );
        }
      );
    </script>

  </body>
</html>
